<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/3/8
  Time: 10:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.css">
<head>
    <title>Title</title>
</head>
<body>

<c:if test="${! empty msg }">
    <script type="text/javascript">

        alert("${msg}");

    </script>

    <!-- 使用完记得清除，避免影响其他页面 -->
    <c:remove var="msg" scope="session"/>
</c:if>

<nav class="navbar navbar-default">
    <div>
        <ul class="nav navbar-nav">
            <li>
                <a><b>快递派发</b></a>
            </li>
            <li>
                <a>${phone }</a>
            </li>
            <li>
                <a href="index.jsp">
                    首页
                </a>
            </li>

            <li>
                <a id="time1"></a>
            </li>

        </ul>
    </div>
</nav>

<table align="center" cellspacing="1px" cellpadding="1px">
    <form action="appoint.do" method="post" onsubmit="return testFull()">

        <tr>
            <td>寄件人姓名:</td>
            <td><input type="text" name="sender_name" value="${user.name}"></td>
        </tr>
        <tr>
            <td>寄件人电话:</td>
            <td><input type="text" name="sender_phone" value="${user.phone}"></td>
        </tr>
        <tr>
            <td>寄件人地址:</td>
            <td>
                <select id="senderProvince">

                </select>
                <select type="text" id="senderCity" hidden="hidden" name="sender_address">

                </select>
            </td>
        </tr>
        <tr>
            <td>收件人姓名:</td>
            <td><input type="text" name="recipient_name"></td>
        </tr>
        <tr>
            <td>收件人电话:</td>
            <td><input type="text" name="recipient_phone"></td>
        </tr>
        <tr>
            <td>收件人地址:</td>
            <td>
                <select id="recipientProvince">

                </select>
                <select type="text" id="recipientCity" hidden="hidden" name="recipient_address">

                </select>
            </td>
        </tr>
        <tr>
            <td>寄件类型:</td>
            <td>
                <select id="op" name="mail_type" style="width: 203px">
                    <option value="1">日用品</option>
                    <option value="2">衣物</option>
                    <option value="3">文件</option>
                    <option value="4">蔬果</option>
                </select>
            </td>
        </tr>

        <tr>

        </tr>
        <td>重量:</td>
        <td><input type="text" onmouseout="showMoney()" name="weight" id="weight" value=1></td>
        <tr>
            <td>金额:</td>
            <td><input type="text" name="mail_cost" id="money" readonly="readonly"></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center"><input type="submit" value="确认寄件"></td>
        </tr>
    </form>
</table>
</body>
</html>
<script>
    $.ajax({
        url: "queryProvince.do",
        type: "POST",
        dataType: "json",
        success: function (data) {
            var str = "<option value=0  >请选择</option>"
            for (var i = 0; i < data.length; i++) {
                str += "<option value=" + data[i].id + " >" + data[i].name + "</option>"
            }
            $("#senderProvince").html(str)
            $("#recipientProvince").html(str)
        }
    })

    $("#senderProvince").change(function () {
        var id = $("#senderProvince").val()
        if (id == 0) {
            $("#senderCity").hide()
        } else {
            showCity(id, $("#senderCity"))
        }

    })

    $("#recipientProvince").change(function () {
        var id = $("#recipientProvince").val()
        if (id == 0) {
            $("#recipientCity").hide()
        } else {
            showCity(id, $("#recipientCity"))
        }
    })

    function showCity(id, obj) {


        $.ajax({
            url: "queryCity.do",
            type: "POST",
            data: {
                "id": id
            },
            dataType: "json",
            success: function (data) {
                var str = ""
                for (var i = 0; i < data.length; i++) {
                    str += "<option value='" + data[i].name + "'  >" + data[i].name + "</option>"
                }
                obj.html(str)
                obj.show()
            }
        })


    }

    // 判断注册的内容是否填写完整
    function testFull() {
        var sender_name = $("input[name='sender_name']").val();
        var sender_phone = $("input[name='sender_phone']").val();
        var sender_address = $("#senderCity").val();
        var recipient_name = $("input[name='recipient_name']").val();
        var recipient_phone = $("input[name='recipient_phone']").val();
        var recipient_address = $("#recipientCity").val();
        var mail_type = $("input[name='mail_type']").val();
        var mail_cost = $("input[name='mail_cost']").val();

        if (sender_name == "" || sender_phone == "" || sender_address == null || recipient_name == "" || recipient_phone == "" || recipient_address == null || mail_type == "" || mail_cost == "") {
            alert("填写不完整！");
            return false;
        } else {
            return true;
        }
    }

    var typeId = $("#op option:selected").val();
    $.ajax({
        url: "queryMoneyByType.do",
        data: {typeId: typeId},
        dataType: "json",
        success: function (data) {
            $("#money").val(data);
        }
    })
    $("#op").change(function () {
        typeId = $(this).val();
        getMoney(typeId)
    })

    function getMoney(typeId) {
        $.ajax({
            url: "queryMoneyByType.do",
            data: {typeId: typeId},
            dataType: "json",
            success: function (data) {
                var weight = $("#weight").val()
                $("#money").val(data * weight);
            }
        })
    }

    var reg = /\d/

    function showMoney() {
        // alert($("#weight").val())

        var weight = $("#weight").val()
        // alert("ok")
        if (reg.test(weight)) {
            if (weight <= 0 || weight > 999) {
                alert("数值不正常")
            } else {
                var typeId = $("#op").val()
                getMoney(typeId)
            }
        } else {
            alert("请输入数字")
        }
    }

    function showTime() {
        var now = new Date();
        return now.toLocaleString();
    }

    setInterval(function () {
        var d = showTime();
        $("#time1").html(d);
    }, 1000);
</script>